<template>
	<view class="container">
		<!-- <view class="module1">
			<text>聊天消息免打扰</text>
			<switch :checked="messageSwitch" class="switch" @change="handleChange" color="#FCC928" />
		</view> -->
		<view class="module2">
			<view class="item" @click="showMask(0)">
				<view class="title">清空通知消息</view>
				<view class="text">默认30天自动清空</view>
			</view>
			<view class="item" @click="showMask(1)">
				<view class="title">清空活动消息</view>
				<view class="text">默认30天自动清空</view>
			</view>
			<view class="item">
				<view class="title">清空聊天记录</view>
				<view class="text">清空之后无法恢复，请谨慎操作</view>
			</view>
		</view>
		<view class="mask" v-if="isShow" @touchmove.stop.prevent="false">
			<view class="inner">
				<text>清空信息</text>
				<text>是否清空信息</text>
				<text>清空之后无法恢复，请谨慎操作</text>
				<view class="btns">
					<view class="btn" @click="clear_notification_message()"> 确认 </view>
					<view class="btn" @click="isShow=false"> 取消 </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				messageSwitch: true,
				isShow: false,
				plate: ''
			}
		},
		methods: {
			showMask(val) {
				this.plate = val
				this.isShow = true
			},
			handleChange(e) {
				this.messageSwitch = e.detail.value
			},
			async clear_notification_message() {
				let res = await this.$fetch(this.$api.clear_notification_message, {
					plate: this.plate
				}, 'POST')
				this.isShow = false
				if (res.code == 0) {
					uni.showToast({
						title: '清空成功'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	.container {
		&>.module1 {
			width: 690rpx;
			height: 140rpx;
			margin: 40rpx auto;
			padding: 0 20rpx;
			font-size: 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			font-weight: bold;
			color: #262626;

			&>.switch {
				transform: scale(0.8);
			}
		}

		&>.module2 {
			width: 690rpx;
			margin: 40rpx auto;
			background-color: #FFFFFF;
			border-radius: 10rpx;

			&>.item {
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 24rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F1F1F5;

				&>.title {
					font-size: 32rpx;
					color: #1A1A1A;
					font-weight: bold;
				}

				&>.text {
					font-size: 28rpx;
					color: #515151;
				}
			}

			&>.item:nth-child(3) {
				border: none;
			}
		}

		&>.mask {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 9;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;

			&>.inner {
				width: 630rpx;
				height: 470rpx;
				background-color: #FFFFFF;
				border-radius: 24rpx;
				padding: 40rpx 30rpx 30rpx 30rpx;
				box-sizing: border-box;
				text-align: center;

				&>text {
					display: block;
					font-size: 32rpx;
					font-weight: bold;
					color: #515151;
				}

				&>text:nth-child(1) {
					font-size: 40rpx;
					font-weight: bolder;
					margin-bottom: 80rpx;
				}

				&>.btns {
					height: 94rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 80rpx;
					line-height: 94rpx;

					&>.btn {
						width: 254rpx;
						border-radius: 12rpx;
						background-color: #F1F1F5;
						color: #7F7F7F;
					}

					&>.btn:nth-child(2) {
						color: #262626;
						background-color: #FCC92D;
						box-shadow: rgba(252, 201, 45, 0.30) 0 6rpx 12rpx 2rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>